<template>
  <div >
    <div class="header">
      <input type="text" placeholder="订单查询">
      <button @click="queryGoods">查询</button>
    </div>

    <div class="main">
      <div>
      <el-table :data="tableData" border size="mini">
        <el-table-column prop="user_id"  label="用户id" width="80">
        </el-table-column>
        <el-table-column prop="order_user_id"  label="订单号" width="85">
        </el-table-column>
        <el-table-column prop="order_time" label="下单时间" width="160">
        </el-table-column>
        <el-table-column prop="order_goods_id" label="子订单号" width="85">
        </el-table-column>
        <el-table-column prop="goods_title" label="商品名称" width="290">
        </el-table-column>
        <el-table-column prop="goods_url" label="图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.goods_url">
          </template>
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="80">
        </el-table-column>
        <el-table-column prop="order_num" label="商品数量" width="80">
        </el-table-column>
        <el-table-column label="状态" width="80">
          <span style="color:#c69c6c;">已完成</span>
        </el-table-column>
      </el-table>

      </div>
    </div>
  </div>
</template>

<script>
import {reqAdminOrder} from '../../../api'
export default {
  data() {
    return {
      tableData:[]
    }
  },
  async mounted() {
    this.tableData = await reqAdminOrder()
  },
  methods: {
    queryGoods(){
      this.$message.success("正在开发中！")
    },
  },
}
</script>

<style scoped>
  .header{
    background: white;
    padding: 8px 0;
  }
  .main{
    background: white;
    margin-top: 10px;
    padding:10px;
  }
  input{
    background: rgb(248, 246, 246);
    height: 30px;
    max-width: 50%;
    margin-left: 10px;
    padding-left: 10px;
  }
  .header button{
    height: 30px;
    margin-left: 8px;
  }
</style>